<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>提现记录</title>
    <link rel="stylesheet" href="../../css/txjl.css">
    <link rel="stylesheet" href="../../src/font/department-font/iconfont.css">
    <script type="text/javascript" src="../../js/xlsx.core.min.js"></script>
    <script src="../../js/daochu.js"></script>
    <script src="../../src/font/department-font/iconfont.js"></script>
    <link rel="stylesheet" href='../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css'>
    <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 col-xs-12">
          <div id="line0">
            <input type="text" id="filterNameInput" placeholder="请输入提现人名称">
            <input type="text" id="filterYearInput" placeholder="请输入年份">
            <input type="text" id="filterMonthInput" placeholder="请输入月份">
            <input type="text" id="filterDayInput" placeholder="请输入天数">

            <button id="lookup"><span class="iconfont icon-chaxun"></span>&nbsp;&nbsp;查询</button>
            <button id="clearall"><span class="iconfont icon-qingkong"></span>&nbsp;&nbsp;清空</button>
          </div>
          <div id = 'line1'>
            <button id="daochu" ><span class="iconfont icon-daochu"></span>&nbsp;&nbsp;导出选中数据</button>
            <button id="daochuall" ><span class="iconfont icon-daochu"></span>&nbsp;&nbsp;导出全部数据</button>
          </div>

          <div id = 'line2'>
            <table class="table table-hover">
              <thead> 
                <tr>
                  <th><input id="allcheck" type="checkbox" onclick="quanxuan()">&nbsp;ID</th>
                  <th>提现人</th>
                  <th>开户行</th>
                  <th>提现金额</th>
                  <th>手续费</th>
                  <th>提现日期</th>
                  <th>状态</th>
                  <th>操作人</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="OfficeManageList"></tbody>
            </table>
          </div>
          <div id="line3">
            <span id="totalNum"></span>

            <select id="pageChange">
              <option value="0" onclick="perChoose()">5条/页</option>
              <option value="1" onclick="perChoose()">10条/页</option>
              <option value="2" onclick="perChoose()">15条/页</option>
            </select>

            <button id="pre">◁</button>
            <div id="pagebox">
            </div>
            <button id ="next">▷</button>

            <div id="gotoPage">
              <span>前往</span>
              <input type="text" id="gotoPageInput"  placeholder="请输入页数">
              <span>页</span>
              <button id="goTo">跳转</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!---------------------------- 完成结算 --------------------------------->
    <div class="modal fade" tabindex="-1" role="dialog" id="canceldiv">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div id="delText">确认后，医生提现记录将会看到提现记录已结算</div>
          <div>
            <button id="jiesuancancel" data-dismiss="modal" >取消</button>
            <button id="jiesuan" data-dismiss="modal" >确认</button>
          </div>
        </div>
      </div>
    </div>



  </body>
  <script>
    //------------------------------------模拟数据生成--------------------------------------------
    let withdrawalData = []
    let people = ['小升','小米','Mr.Ge','会飞的松鼠','米老鼠','唐老鸭']
    let peopleNum
    let kaihu = ['建行','农行','邮政','中国银行','招商','工行']
    let kaihuNum
    for(let i = 1;i<=100;i++)
    {
      let obj = {}
      obj.id = i
      kaihuNum = parseInt(Math.random()*(6-0)+0)
      obj.kaihu = kaihu[kaihuNum]
      peopleNum = parseInt(Math.random()*(6-0)+0)
      obj.peopleName = people[peopleNum]    
      obj.money = 100
      obj.tip = 0.6
      obj.year = parseInt(Math.random()*(2023-2021)+2021)
      obj.month = parseInt(Math.random()*(13-1)+1)
      obj.day = parseInt(Math.random()*(28-1)+1)
      obj.state = parseInt(Math.random()*(2-0)+0)
      obj.hour = parseInt(Math.random()*(24-1)+1)
      obj.min = parseInt(Math.random()*(60-1)+1)
      obj.second = parseInt(Math.random()*(60-1)+1)
      withdrawalData.push(obj)
    }

    let beifenData = []
    let maxPage
    let nowPage = 1
    let modifyid
    let perNum = 5
    let cancelid
    let lookupstate = 0
    let jiesuanstate = 0
    let modifystate = 0
    let addstate = 0
    beifenData=[...withdrawalData]

    initialData()
    function initialData()
    {
      nowPage = 1
      $('#gotoPageInput').val('')
      showPage(withdrawalData)
      showListBy(withdrawalData,1,perNum)
    }

    function quanxuan()
    {
      if($('#allcheck').prop('checked'))
      {
        $('.allche').prop('checked',true)
      }
      else
      {
        $('.allche').prop('checked',false)
      }
    }
//----------------------------筛选-----------------------
    $("#lookup").click(function(){
      datalookup()
    })
    $("#clearall").click(function(){
      dataClear()
    })

    function datalookup(){
      withdrawalData = [...beifenData]
      let lookupInput = $('#filterNameInput').val()
      let lookupYearInput = $('#filterYearInput').val()
      let lookupMonthInput = $('#filterMonthInput').val()
      let lookupDayInput = $('#filterDayInput').val()

      if(lookupInput!='')
      {
        for(let i=0;i<withdrawalData.length;i++){
          if(lookupInput!=withdrawalData[i].peopleName)
          {
            withdrawalData.splice(i,1)
            i--
          }
        }
      }

      if(lookupYearInput!='')
      {
        for(let i=0;i<withdrawalData.length;i++){
          if(withdrawalData[i].year!=lookupYearInput)
          {
            withdrawalData.splice(i,1)
            i--
          }
        }     
      }

      if(lookupMonthInput!='')
      {
        if(lookupYearInput != '')
        {
          for(let i=0;i<withdrawalData.length;i++){
            if(withdrawalData[i].month!=lookupMonthInput)
            {
              withdrawalData.splice(i,1)
              i--
            }
          }     
        }
        else if(lookupDayInput == '')
        {
          alert('必须输入年份后才能输入月份')
        }
      }
      if(lookupDayInput!='')
      {
        if(lookupYearInput != '' && lookupMonthInput != '')
        {
          for(let i=0;i<withdrawalData.length;i++){
            if(withdrawalData[i].day!=lookupDayInput)
            {
              withdrawalData.splice(i,1)
              i--
            }
          }
        }
        else
        {
          alert('必须输入年份和月份后才能输入天数')  
        }   
      }

      if(jiesuanstate==0){
        nowPage = 1
      }

      showPage(withdrawalData)
      showListBy(withdrawalData,nowPage,perNum)
    }
    
    function dataClear(){
      jiesuanstate = 0
      $('#filterNameInput').val('')
      $('#filterYearInput').val('')
      $('#filterMonthInput').val('')
      $('#filterDayInput').val('')
      withdrawalData = [...beifenData]
      nowPage = 1
      showPage(withdrawalData)
      showListBy(withdrawalData,nowPage,perNum)
    }

//--------------------------数据渲染---------------------
    function showList(data){
        $('#OfficeManageList').html('')
        for(let i=0;i<data.length;i++){
          $('#OfficeManageList').append(`
          <tr>
              <td><input class='checkstyle allche' dataStu = "${data[i].id}" type="checkbox">&nbsp;${data[i].id}</td>  
              <td>${data[i].peopleName}</td>  
              <td>${data[i].kaihu}</td>
              <td>${data[i].money}</td>
              <td>${data[i].tip}</td>
              <td>${data[i].year}-${data[i].month}-${data[i].day}&nbsp;&nbsp;&nbsp;${data[i].hour}:${data[i].min}:${data[i].second}</td>
              <td>${data[i].state == 0 ? `待结算`:`已结算`}</td>
              <td>${data[i].state == 0 ? ``:`admin`}</td>
              <td>
                ${data[i].state == 0 ?
                   `<button class="delmodal" dataStu = "${data[i].id} "type="button" data-toggle="modal" data-target="#canceldiv">完成结算</button>`:``}
              </td>  
            </tr>
          `)
        }
      }
    function showListBy(data,pageNum,perNum){
      let startNum = (pageNum - 1)*perNum
      showListByData = data.slice(startNum,startNum+perNum)
      showList(showListByData)
      let leftNum = pageNum%5
      if(leftNum==0)
      {
        $('.page').eq(4).addClass('active').siblings().removeClass('active')
      }
      else
      {
        $('.page').eq(leftNum-1).addClass('active').siblings().removeClass('active')
      }
      nowPage = pageNum
    }

    function showPage(data){
      maxPage = Math.ceil(data.length/perNum)
      let intNum = parseInt(Math.ceil(nowPage/5))
      intNum--
      intNum = intNum*5
      $("#pagebox").html('')
      for(let i = intNum + 1;i<intNum + 6;i++)
      {
        if(i<=maxPage)
        {
          $("#pagebox").append(`<span class="page">${i}</span>`)
        }
        else
        {
          break
        }
      }
      $('#totalNum').html('')
      $('#totalNum').html(`共${maxPage}页`)
    }

    $('#pagebox').on('click','.page',function(){
      showListBy(withdrawalData,parseInt($(this).text()),perNum)
    })
    //-----------------上下页--------------------------
    $('#pre').click(function(){
      if(nowPage>1){
        nowPage -= 1
        showPage(withdrawalData)
        showListBy(withdrawalData,nowPage,perNum)
      }
    })
    $('#next').click(function(){
      if(nowPage<maxPage){
        nowPage += 1
        showPage(withdrawalData)
        showListBy(withdrawalData,nowPage,perNum)
      }
    })

    $("#pageChange").change(function(){
      let Num =  $("#pageChange").val();
      if(Num == 0)
      {
        perNum = 5
        initialData()
      }
      else if(Num == 1)
      {
        perNum = 10
        initialData()
      }
      else if(Num == 2)
      {
        perNum = 15
        initialData()
      }
    })
    $('#goTo').click(function(){
      let num = parseInt($('#gotoPageInput').val())
      if(num>0&&num<=maxPage)
      {
        nowPage = num
        showPage(withdrawalData)
        showListBy(withdrawalData,num,perNum)
      }
      else{
        alert('请在正确的页码范围内输入')
      }
    })
    //---------------------结算--------------------------
    $('#OfficeManageList').on('click','.delmodal',function(e){
      cancelid = parseInt($(this).attr("dataStu"))
    })
    $('#jiesuan').click(function(){
      jiesuan(cancelid)
      jiesuanstate = 1
      datalookup()
    })
    function jiesuan(id){
      let num = 0
      for(let i = 0;i<beifenData.length;i++){
        if(id==beifenData[i].id)
        {
          beifenData[i].state = 1
        }
      }
    }
    //---------------------数据导出--------------------------
    $('#daochuall').click(function(){
      let jsono = [];
      for(let j = 0;j<100;j++){
        let newobj = {
          'ID' : `${withdrawalData[j].id}`,
          '提现人' : `${withdrawalData[j].peopleName}`,
          '开户行' : `${withdrawalData[j].kaihu}`,
          '提现金额' : `${withdrawalData[j].money}`,
          '手续费' : `${withdrawalData[j].tip}`,
          '提现日期' : `${withdrawalData[j].year}-${withdrawalData[j].month}-${withdrawalData[j].day}__${withdrawalData[j].hour}:${withdrawalData[j].min}:${withdrawalData[j].second}`,
          '状态' : `${withdrawalData[j].state == 0 ? `待结算`:`已结算`}`,
          '操作人' : `${withdrawalData[j].state == 0 ? ``:`admin`}`
        }
        jsono.push(newobj)
      }
      downloadExl(jsono)
    })


    $('#daochu').click(function(){
      let jsono = [];
      let chooseLength = $('.allche:checked').length
      for(let i = 0;i<perNum;i++)
      {
        if($('.allche').eq(i).prop('checked'))
        {
          let id = $('.allche').eq(i).attr('dataStu')
          for(let j = 0;j<100;j++){
            if(withdrawalData[j].id==id)
            {
              let newobj = {
                'ID' : `${withdrawalData[j].id}`,
                '提现人' : `${withdrawalData[j].peopleName}`,
                '开户行' : `${withdrawalData[j].kaihu}`,
                '提现金额' : `${withdrawalData[j].money}`,
                '手续费' : `${withdrawalData[j].tip}`,
                '提现日期' : `${withdrawalData[j].year}-${withdrawalData[j].month}-${withdrawalData[j].day}__${withdrawalData[j].hour}:${withdrawalData[j].min}:${withdrawalData[j].second}`,
                '状态' : `${withdrawalData[j].state == 0 ? `待结算`:`已结算`}`,
                '操作人' : `${withdrawalData[j].state == 0 ? ``:`admin`}`
              }
              jsono.push(newobj)
            }
          }
        }
      }
      if(chooseLength!=0)
      {
        downloadExl(jsono)
      }
      else{
        alert('没有选中任何数据')
      }
    })

</script>
</html>
